<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/css/bootstrap.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>hello</title>
</head>
<body>


<!--------头部start------------>
<header id="tjh_header">
    <!-- 上部分 -->
    <div class="top-bar d-none d-sm-none d-md-none d-lg-block text-center text-muted">
        <div class="container">
            <div class="row">
                <div class="top-bar-1 col-md-2">
                    <a href="" class="text-muted">
                    <img src="./font/phone new.svg" alt="" width="15">
                    <span>关注二维码</span>
                    <img src="./img/code.jpg" alt="" width="100" class="code">
                </a>
                </div>
                <div class="top-bar-2 col-md-5">
                        <img src="./font/phone new.svg" alt="" width="15">
                        <span>188888-8888888-888888(17:00--18:00)</span>
                </div>
                <div class="top-bar-3 col-md-2">
                    <a href="###" class="text-muted">学生</a>
                    <a href="###" class="text-muted">老师</a>
                </div>
                <div class="top-bar-4 col-md-3">
                    <button type="button" class="btn btn-primary btn-sm">登录</button>
                    <button type="button" class="btn btn-secondary btn-sm">注册</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 下部分 -->
    
        <nav class="navbar navbar-expand-lg navbar-light narbar-tjh">
            <div class="container">
            <a class="navbar-brand" href="#">
                <img src="./img/logo.jpg"  width="100" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
          
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#">Disabled</a>
                </li>
              </ul>
            </div>
        </div>
          </nav>

</header>
<!---------头部结束------------>

<!--------轮播图start------------>
<section id="tjh_carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#tjh_carousel" data-slide-to="0" class="active"></li>
        <li data-target="#tjh_carousel" data-slide-to="1"></li>
        <li data-target="#tjh_carousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="./img/carousel.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="./img/carousel2.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="./img/carousel3.jpg" class="d-block w-100" alt="...">
        </div>
      </div>
      <a class="carousel-control-prev" href="#tjh_carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#tjh_carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
</section>
<!---------轮播图结束------------>

<!--------热门课程start------------>
<section id="tjh_hot">
    <h3 class="text-center my-3">热门板块</h3>
    <div class="container">
        <div class="row">
            <div class=" col-md-6 col-lg-4">
                <div class="media my-3 bg-light">
                    <img class="mr-3  rounded-circle img-fluid img-thumbnail" src="./img/code.jpg" alt="Generic placeholder image" width="100">
                    <div class="media-body">
                      <h5 class="mt-0">唐景航</h5>
                      嘻嘻嘻哈哈哈哈哈哈哈
                    </div>
                  </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4">
                    <div class="media my-3 bg-light">
                        <img class="mr-3  rounded-circle img-fluid img-thumbnail" src="./img/code.jpg" alt="Generic placeholder image" width="100">
                        <div class="media-body">
                          <h5 class="mt-0">唐景航</h5>
                          嘻嘻嘻哈哈哈哈哈哈哈
                        </div>
                      </div>
            </div>
            <div class=" col-md-6 col-lg-4">
                    <div class="media my-3 bg-light">
                        <img class="mr-3  rounded-circle img-fluid img-thumbnail" src="./img/code.jpg" alt="Generic placeholder image" width="100">
                        <div class="media-body">
                          <h5 class="mt-0">唐景航</h5>
                          嘻嘻嘻哈哈哈哈哈哈哈
                        </div>
                      </div>
            </div>
            <div class=" col-md-6 col-lg-4 ">
                <div class="media my-3 bg-light">
                    <img class="mr-3  rounded-circle img-fluid img-thumbnail" src="./img/code.jpg" alt="Generic placeholder image" width="100">
                    <div class="media-body">
                      <h5 class="mt-0">唐景航</h5>
                      嘻嘻嘻哈哈哈哈哈哈哈
                    </div>
                  </div>
        </div>
        <div class=" col-md-6 col-lg-4">
            <div class="media my-3 bg-light">
                <img class="mr-3  rounded-circle img-fluid img-thumbnail" src="./img/code.jpg" alt="Generic placeholder image" width="100">
                <div class="media-body">
                  <h5 class="mt-0">唐景航</h5>
                  嘻嘻嘻哈哈哈哈哈哈哈
                </div>
              </div>
    </div>
    <div class=" col-md-6 col-lg-4">
        <div class="media my-3 bg-light">
            <img class="mr-3  rounded-circle img-fluid img-thumbnail" src="./img/code.jpg" alt="Generic placeholder image" width="100">
            <div class="media-body">
              <h5 class="mt-0">唐景航</h5>
              嘻嘻嘻哈哈哈哈哈哈哈
            </div>
          </div>
</div>

        </div>
    </div>
</section>
<!---------热门课程结束------------>

<!--------产品中心start------------>
<section id="tjh_product" class="bg-light">
    <div class="container">
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
              <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
              <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
              <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
            </div>
          </nav>
          <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                <div class="row">
                    <div class="col-lg-4 d-none  d-sm-none d-md-none d-lg-block">
                      <img class="ml-3 my-3 img-fluid img-thumbnail" src="./img/homepic.jpg" width="80%" alt="">
                    </div>
                    <div class="col-lg-8 ">
                      <p>1、敬业。敬业是从业者基于对职业的敬畏和热爱而产生的一种全身心投入的认认真真、尽职尽责的职业精神状态。中华民族历来有“敬业乐群”“忠于职守”的传统，敬业是中国人的传统美德，也是当今社会主义核心价值观的基本要求之一。早在春秋时期，孔子就主张人在一生中始终要“执事敬”“事思敬”“修己以敬” 。“执事敬”，是指行事要严肃认真不怠慢；“事思敬”，是指临事要专心致志不懈怠；“修己以敬”，是指加强自身修养保持恭敬谦逊的态度。 [1] </p>
                      <p>2、精益。精益就是精益求精，是从业者对每件产品、每道工序都凝神聚力、精益求精、追求极致的职业品质。所谓精益求精，是指已经做得很好了，还要求做得更好，“即使做一颗螺丝钉也要做到最好”。正如老子所说，“天下大事，必作于细”。能基业长青的企业，无不是精益求精才获得成功的。</p>
                      <p>3、专注。专注就是内心笃定而着眼于细节的耐心、执着、坚持的精神，这是一切“大国工匠”所必须具备的精神特质。从中外实践经验来看，工匠精神都意味着一种执着，即一种几十年如一日的坚持与韧性。“术业有专攻”，一旦选定行业，就一门心思扎根下去，心无旁骛，在一个细分产品上不断积累优势，在各自领域成为“领头羊”。在中国早就有“艺痴者技必良”的说法，如《庄子》中记载的游刃有余的“庖丁解牛”、《核舟记》中记载的奇巧人王叔远等。 [1] </p>                      
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">

            </div>
            <div class="tab-pane fade " id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">

            </div>
          </div>
    </div>
</section>
<!---------产品中心结束------------>

<!--------关于我们start------------>
<section id="tjh_about">
<h3 class="text-center my-3">关于我们</h3>
<div class="container">
  <div class="row">
    <div class="col-lg-8 order-2 order-lg-1 mt-3">
      <p class="text-muted">
            世界上各种职业千千万万，大到从这个国家跨越到另一个国家，小到从总裁到收废品。然而，工匠你懂么。工匠，只是那么简单地动动手就好了？并非，要是只要动手做一件成品出来，我也会，找几块木板随便钉一钉，不一样是成品么。做工匠事业，首先得有一定的基础，一定的实力，还要有一颗细腻的心，遇上脾气好的顾客算是幸运的了，要是遇上脾气暴躁，爱挑人毛病的顾客不就倒霉了？动不动给你扣一半钱，那还是轻的，重一点直接扣光。那还活不活了？
      </p>
      <p class="text-muted">
        　　工匠并不特别，一双手，一颗心，一个大脑，就这么做着工作，我们一样。一双手，一颗心，一个大脑。也只是一些细节罢了，工匠的手伤疤许多，旧的未好新的又来。一日复一日，手就变得“坑坑洼洼”了；工匠的心细腻的多，一个好的成品决定权在工匠的心。细心耐心一些，没有什么做不好；工匠的大脑变化多样，想象力丰富，因此才能铸就那么多精致的雕刻等作品。
      </p>
      <p class="text-muted">
        　　有一种坚持叫工匠；有一种美德叫工匠；有一种智慧叫工匠；有一种朴实叫工匠；有一种巧夺天工叫工匠；有一种勤奋叫工匠；有一种情怀叫工匠。
      </p>
    </div>
     <div class="col-lg-4 order-1 order-lg-2">
      <img src="./img/worker.jpg" width="100%" alt="" class="img-fluid img-thumbnail rounded-bottom">
    </div>
  </div>
</div>
</section>
<!---------关于我们结束------------>

<!--------友情链接start------------>
<section id="tjh_link"></section>
 <!---------友情链接结束------------>


<!--------友情链接start------------>
<footer id="tjh_footer">
  <div class="container d-flex justify-content-center align-items-center">
    <div class="row">
      <div class="col-lg-4 d-none d-sm-none d-md-none d-lg-block">
        <div class="row">
          <div class="offset-2 col-4">关于我们</div>
          <div class="col-6">产品介绍</div>
          <div class="offset-2 col-4">公司介绍</div>
          <div class="col-6">课程介绍</div>
          <div class="offset-2 col-4">优质视屏</div>
          <div class="col-6">联系我们</div>
        </div>
      </div>
      <div class="col-lg-5 col-md-6">
        <div>公司地址：广东东莞松山湖</div>
        <div>电话：13712599999</div>
        <div>邮箱：123445dfmk@qq.com</div>
      </div>
      <div class="col-lg-3 col-md-6 d-none d-sm-none d-md-block">
        <div>联系我们</div>
      </div>
    </div>
  </div>
  
</footer>
<!---------友情链接结束------------>

    <script src="./js/jquery-3.0.0.js"></script>
    <script src="./lib/js/bootstrap.bundle.js"></script>
</body>
</html>